<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸检测 - Web 视觉检测系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>😊 人脸检测</h1>
            <p>基于 Haar Cascade 的实时人脸检测</p>
        </header>

        <div class="detection-container">
            <div class="detection-header">
                <h2>实时检测</h2>
                <a href="/" class="btn btn-secondary">← 返回主页</a>
            </div>

            <div class="info-box">
                <p><strong>功能说明：</strong></p>
                <p>• 使用 Haar Cascade 分类器实时检测人脸</p>
                <p>• 检测到的人脸会用蓝色矩形框标注</p>
                <p>• 显示检测到的人脸数量和 FPS</p>
                <p>• 支持多人脸同时检测</p>
            </div>

            <div class="video-container">
                <img src="{{ url_for('video_feed', detection_type='face_detection') }}" alt="视频流" class="video-stream"
                    onerror="this.src=''; this.alt='❌ 无法加载视频流';">
                <div class="video-loading">
                    <div class="spinner"></div>
                    <p>正在加载视频流...</p>
                </div>
            </div>

            <div class="controls">
                <h3>技术信息</h3>
                <p>🔍 <strong>检测算法：</strong>Haar Cascade Classifier</p>
                <p>📊 <strong>检测精度：</strong>scaleFactor=1.1, minNeighbors=4</p>
                <p>⚡ <strong>处理速度：</strong>实时（根据硬件性能）</p>
                <p>💡 <strong>提示：</strong>正面光线充足时检测效果最佳</p>
            </div>
        </div>

        <footer>
            <p>Web 视觉检测系统 | 人脸检测模块</p>
        </footer>
    </div>

    <script>
        document.querySelector('.video-stream').onload = function () {
            const loading = document.querySelector('.video-loading');
            if (loading) {
                loading.style.display = 'none';
            }
        };
    </script>
</body>

</html>